<!-- 承运商列表 -->
<template>
  <div class="gridContainer">
    <div class="m-sech-wrap displayflex">
      <div class="flex1">
        <div class="m-sech-box displayflex">
          <i class="iconfont ft16 icon-search"></i>
          <div class="flex1 m-sech-ipt">
            <input type="text" placeholder="输入物流单号" v-model="KeyWord">
          </div>
        </div>
      </div>
      <div class="m-sech-btn" @click="getData('searching')">搜索</div>
    </div>

    <tab bar-active-color="#23a5a5" :line-width="2" active-color="#23a5a5">
      <tab-item :selected="tabNo == 0" @on-item-click="handleTabChange(0)">全部</tab-item>
      <tab-item :selected="tabNo == 1" @on-item-click="handleTabChange(1)">待派车</tab-item>
      <tab-item :selected="tabNo == 2" @on-item-click="handleTabChange(2)">配送中</tab-item>
      <tab-item :selected="tabNo == 3" @on-item-click="handleTabChange(3)">已签收</tab-item>
      <tab-item :selected="tabNo == 4" @on-item-click="handleTabChange(4)">异常</tab-item>
    </tab>

    <div class="tab-content">
      <scroller lock-x scrollbar-y use-pullup :height="'-161'" @on-pullup-loading="getData" v-if="totalRecords > 0" :pullup-config="ScrollerConfig" ref="Scroller">
        <div>
          <div class="driver-list driver-detail" v-for="trtpbb in datas">
            <div class="list-header">
              <span class="f-l">业务单号：
                <i>{{ trtpbb.BBillNo }}</i>
              </span>
              <div  v-if="trtpbb.Information && trtpbb.Information != ''">
                <em class="f-r orange">异常订单</em>
              </div>
              <div v-else>
                <em class="f-r orange">{{trtpbb.DataIntroduction}}</em>
              </div>
            </div>
            <div class="list-content">
                <dl class="displayflex">
                    <dt>
                       <div>
                          <i class="llse llse-cargo"></i>
                          <p>{{trtpbb.Pkgs}}件</p>
                        </div>
                    </dt>
                    <dd class="flex1">
                        <p>
                          <label>起运时间：</label>
                          <span>{{trtpbb.DepartureDate | time}}</span>
                        </p>
                        <p>
                          <label>起运地：</label>
                          <span>{{trtpbb.DepartureVenue | removeSplash}}{{trtpbb.DepartureAddress}}</span>
                        </p>
                        <p>
                          <label>目的地：</label>
                          <span>{{trtpbb.ArrivalVenue | removeSplash}}{{trtpbb.ArrivalAddress}}</span>
                        </p>
                        <p>
                          <label>收货单位：</label>
                          <span>{{trtpbb.SaleCorpName}}</span>
                        </p>
                        <p v-if="trtpbb.Information && trtpbb.Information != ''">
                          <label>异常原因：</label>
                          <span>{{trtpbb.ExceptionMemo || trtpbb.Information}}</span>
                        </p>
                    </dd>
                </dl>
            </div>

            <div class="list-btn" >
              <div class="carbtn" @click="GoToDetail(trtpbb.Guid)">详情</div>
              <template v-if="!trtpbb.Information || trtpbb.Information == ''">
                <div class="carbtn" v-if="parseInt(trtpbb.LogState) == 81"@click="GoToBackbill(trtpbb)">回单</div>
                <div class="carbtn" v-if="parseInt(trtpbb.LogState) > 51" @click="GoToProgress(trtpbb)">进度</div>
                <div class="carbtn" v-if="parseInt(trtpbb.LogState) > 52 || parseInt(trtpbb.State) > 50" @click="GoToDistribution(trtpbb.Guid)">配送详情</div>
              </template>
            </div>
          </div>
        </div>
        <p class="txt-bottom" v-if="noMore"><em class="txt">我是有底线的</em></p>
      </scroller>

      <div class="noDate_page" v-if="totalRecords == 0">
        <div class="noDate_icon">
          <i class="iconfont icon-null"></i>
        </div>
        暂无数据！
      </div>
    </div>
    
    <footer-menu :status='2'></footer-menu>
  </div>
</template>

<script>
import footerMenu from '@/components/carrier/core/carrier-footer.vue';
export default  {
  data() {
    return {
      KeyWord: '',
      
      PageIndex: 1,
      PageSize: 8,
      totalRecords: 0,
      datas: [],
      tabNo:0,

      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      },
      noMore: false,
    };
  },
  components: {
    footerMenu
  },
  watch: {
    KeyWord(n,o) {
      if (n == "") {
        this.getData('searching');
      }
    },
    // $route: function() {
    //   this.ordertype = this.$route.query.state || "";
    //   if (this.ordertype == "all") {
    //     this.ordertype = "";
    //   }
    //   this.getData(1);
    // },
  },
  computed: {
    userinfo(){
      return localStorage.getItem('userinfo')?JSON.parse(localStorage.getItem('userinfo')):null;
    }
  },
  created(){
    this.ordertype = this.$route.query.State || "";
    if (this.ordertype == "all") {
      this.ordertype = "";
    }
    this.getData();
  },
  mounted(){

  },
  methods: {
    getData(type) {    
      if (type == 'searching') {
        this.PageIndex = 1;
        this.totalRecords = 0;
        this.datas = [];
        this.noMore = false;
      }

      let query = {
        TenantGuid: this.userinfo.TenantGuid,
        DeliverGuid: this.userinfo.BelongGuid,
        BBillNo: this.KeyWord,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize,
      };

      switch (this.tabNo) {
        case 0:
          query.StateList = ["44", "51", "52", "53", "56", "81"];
          break;
        case 1:
          query.StateList = ["42"];
          query.ExceptionMark = "N";
          break;
        case 2:
          query.StateList = ["44", "51", "52", "53", "56"];
          query.ExceptionMark = "N";
          break;
        case 3:
          query.StateList = ["81"];
          query.ExceptionMark = "N";
          break;
        case 4:
          query.ExceptionMark = "Y";
          break;
        default:
          query.StateList = ["44", "51", "52", "53", "56", "81"];
          break;
      }

      this.Ajax.post("GetOrderlist", query).then((res) => {
        if (res.IsSuccess) {
          if (res.Datas.length > 0) {
            this.datas = this.datas.concat(res.Datas);
          }
          this.PageIndex++;
          this.totalRecords = res.TotalRecords;
          this.$nextTick(() => {
            if(this.$refs.Scroller) this.ScrollControl();
          })
        } else {
          this.Toast({
            message: "数据异常，请稍后刷新"
          });
        }
      }).catch((err) => {
        console.log(err)
      });
    },
  
    handleTabChange(tabNo){
      this.tabNo = tabNo;
      this.PageIndex = 1;
      this.totalRecords = 0;
      this.datas = [];
      this.noMore = false;
      this.getData();
    },

    GoToDetail(BBillGuid) {
      this.$router.push({
        path: "carrdetail",
        query: {
          Guid: BBillGuid
        }
      });
    },

    GoToBackbill(item){
      this.$router.push({
        path: 'receiptdetail',
        query:{
          Guid: item.Guid,
        }
      });
    },

    GoToProgress(item){
      this.$router.push({
        path: 'processingdetail',
        query:{
          Guid: item.Guid,
        }
      });
    },

    GoToDistribution(BBillGuid){
      this.$router.push({
        path: 'distribution',
        query: {
          Guid: BBillGuid
        }
      });
    },


    ScrollControl() {
      if (this.totalRecords <= this.PageSize) {
        this.ScrollerConfig.content = "";
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if (this.datas.length > 0 && this.$refs.Scroller) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
}
</script>